<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="zxh">
    <title>jQuery遮罩层</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-size: 14px;
            color: #666;
            background-color: #ccc;
        }
        
        section {
            width: 400px;
            height: 600px;
            margin: 8px auto;
            padding: 10px;
            background-color: #fff;
            position: relative;
        }
        
        div#box {
            width: 405px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
            border: 5px solid orange;
        }
        
        section img {
            width: 385px;
            height: 500px;


            margin: 2px auto;
            vertical-align: middle;
        }
        
        section p {
            padding: 20px;
        }
        
        main {
            width: 450px;
            max-width: 1200px;
            margin: 5px auto;
            padding: 10px;
            background-color: #fff;
            overflow: hidden;
        }
        
        main .star {
            float: left;
            margin: 7px;
            position: relative;
            overflow: hidden;
        }
        
        main .star p {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: -200px;
            padding: 10px;
            background-color: #ccc;
            color: white;
        }
    </style>
</head>

<body>
    <section>
        <div id="box"></div>
        <img src="img/1.jpg" alt="">
        <p>[心情]我们常常像是在迷雾中穿行，前方灰蒙蒙一片，辨不出方向和状况。</p>
    </section>
    <main>
        <div class="list">
            <div class="star box1">
                <img src="img/star.jpg" alt="">
                <p class="p1">钻石的美丽来自它本身,<br>但它的光芒确实人们赋予它的。</p>
            </div>
            <div class="star box2">
                <img src="img/star1.jpg" alt="">
                <p class="p2">钻石的美丽来自它本身,<br>但它的光芒确实人们赋予它的</p>
            </div>
        </div>
    </main>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    $('section').mouseover(function () {
        $('#box').fadeIn(1000)
    })
    $('section').mouseout(function () {
        $('#box').fadeOut(1000)
    })


    $('main .box1').mouseover(function () {
        $(this).css('display', 'block')
        $('.p1').animate({
            'left': '0',
            'opacity': '0.7'
        }, 200)
    })
    $('main .box2').mouseleave(function () {
        $('.p2').animate({
            'left': '-200px',
            'opacity':' 0.7'
        }, 200)
    })
     $('main .box2').mouseover(function () {
        $(this).css('display', 'block')
        $('.p2').animate({
            'left': '0',
            'opacity': '0.7'
        }, 200)
    })
    $('main .box1').mouseleave(function () {
        $('.p1').animate({
            'left': '-200px',
            'opacity':' 0.7'
        }, 200)
    })

</script>